import React from "react";

interface AvailablePlan {
  lang: string;
  direction: string;
}

interface PlanSelectionInterfaceProps {
  availablePlans: AvailablePlan[];
  onPlanSelect: (plan: AvailablePlan) => void;
}

const PlanSelectionInterface: React.FC<PlanSelectionInterfaceProps> = ({
  availablePlans,
  onPlanSelect,
}) => (
  <div className="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg w-full max-w-md">
    <h1 className="text-xl font-bold text-center mb-6 dark:text-white">选择学习计划</h1>
    <p className="text-sm text-gray-600 dark:text-gray-400 text-center mb-4">
      选择您的学习计划：
    </p>
    <div className="space-y-3">
      {availablePlans.map((p, index) => (
        <button
          key={index}
          onClick={() => onPlanSelect(p)}
          className="w-full text-left bg-gray-100 dark:bg-gray-700 hover:bg-indigo-100 dark:hover:bg-indigo-900 p-4 rounded border border-gray-300 dark:border-gray-600 transition-colors duration-150"
        >
          <span className="font-medium text-gray-900 dark:text-gray-100">{p.lang}</span>
          <span className="text-gray-600 dark:text-gray-400 ml-2">- {p.direction || '通用'}</span>
        </button>
      ))}
    </div>
  </div>
);

export default PlanSelectionInterface;